<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ice="http://www.icesoft.com/icefaces/component"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:c="http://java.sun.com/jstl/core"
	xmlns:t="http://myfaces.apache.org/tomahawk"
	xmlns:icefusion="http://icefusion.googlecode.com/icefusion"
	xmlns:m="http://code.google.com/p/gmaps4jsf/">
<body>
<ui:composition template="#{iceFusionConsts.templatePage}">
	<ui:define name="title">
		#{icecube['application.menu.push.game']}
	</ui:define>
	<ui:define name="content">
		#{icecube['application.menu.push.game.text']}
		<!-- Use ICEfaces config for gmaps4jsf -->
		<style type="text/css">
		  .iceGmpMapTd div.gmap {width: 0px; height: 0px}
          .iceGmpMapTd {visibility: hidden}
		</style>
		<ice:gMap/>
        <script>
            // based on http://www.daftlogic.com/sandbox-click-for-country.htm
            function clickedMap(marker, point) {
            
                if(!marker) {
                    var pointString=point.lat() + "," + point.lng();
                    var geocoder = new GClientGeocoder();                    
                    geocoder.getLocations(pointString, calculateCountry);
                }
            }
            
            function calculateCountry(response) {
               
                var country;
                // gmapGameJS.clearOverlays();
                if (!response || response.Status.code != 200) {
                    country="None";
                } 
                else {
                    if (response.Placemark[0].AddressDetails == undefined) {
                        country="None";
                    }
                    else {
                        country=response.Placemark[0].AddressDetails.Country.CountryName;
                    }
                }
                document.getElementById("gmapGameForm:country").value=country;
                // alert("Thanks.");
            }
        </script>
        <ice:form id="playerGameForm" rendered="#{game.player eq null}">
            <ice:panelGrid columns="3">
                <ice:outputText value="#{icecube['application.menu.push.game.player.text']}" />
                <ice:inputText id="name" value="#{game.name}" required="true"/>
                <ice:commandButton value="#{icecube['application.menu.push.game.player.button']}" 
                action="#{game.addPlayer}" />
            </ice:panelGrid>
        </ice:form>
        <ice:form id="gmapGameForm" rendered="#{game.player ne null and !game.playerNotAddedMessage.rendered}">
	        <m:map id="gmapGame" jsVariable="gmapGameJS" width="930" height="400" zoom="2"
	            autoReshape="true" type="G_NORMAL_MAP" renderOnWindowLoad="false">
	            <ui:repeat var="country"  value="#{game.countriesMap}" >
                    <m:marker address="#{country.key}">
                        <m:icon imageURL="#{country.value}" width="28" height="28"/>
                    </m:marker>
                </ui:repeat>
	            <m:mapControl name="GLargeMapControl" position="G_ANCHOR_TOP_LEFT"/>
	            <m:mapControl name="GScaleControl" position="G_ANCHOR_BOTTOM_LEFT" offsetWidth="70"/>
	            <m:mapControl name="GMapTypeControl" position="G_ANCHOR_TOP_RIGHT"/>
                <m:eventListener eventName="click" jsFunction="clickedMap"/>	            
	        </m:map>
            <ice:panelGrid columns="1">
                <ice:outputText value="#{icecube['application.menu.push.game.player.status.name']}: #{game.name}" />
                <ice:outputText value="#{icecube['application.menu.push.game.player.status.countries']}: #{game.countries}" />
                <ice:outputText value="#{icecube['application.menu.push.game.player.status.countries.hit']}: #{game.countriesHit}" />
                <ice:outputText value="#{icecube['application.menu.push.game.player.status.losers']}: #{game.losers}" />            
            </ice:panelGrid>
	        <ice:panelGrid columns="3">
                <ice:outputText value="#{icecube['application.menu.push.game.country.text']}" />
                <ice:inputText id="country" value="#{game.country}" />
                <ice:commandButton value="#{icecube['application.menu.push.game.country.button']}" 
                action="#{game.checkCountry}" rendered="#{!game.loser}"/>
	        </ice:panelGrid>
	        <ice:commandButton value="#{icecube['application.menu.push.game.leave.button']}" 
                action="#{game.deletePlayer}" />
        </ice:form>
        <icefusion:messageDialog title="#{icecube['application.menu.push.game.player.message.notAdded.title']}" 
            text="#{icecube['application.menu.push.game.player.message.notAdded.text']}" 
            rendered="#{game.playerNotAddedMessage.rendered}" eventBean="#{game.playerNotAddedMessage}"/>        
        <icefusion:messageDialog title="#{icecube['application.menu.push.game.player.message.hit.title']}" 
            text="#{icecube['application.menu.push.game.player.message.hit.text']}" 
            rendered="#{game.playerHitMessage.rendered}" eventBean="#{game.playerHitMessage}">
        </icefusion:messageDialog>
        <p><br/><br/></p>
        #{icecube['application.menu.push.game.memory']}                    
   	</ui:define>
</ui:composition>
</body>
</html>